<template>
  <div class="all">
    <el-container>
      <el-header>
        <div class="header_container">
          <div class="Logo" @click="$router.push({ name: 'HomePage' })">
            <span>
              <img src="../../assets/images/cpic_common_icons.png" />
            </span>
          </div>
          <div class="nav">
            <ul class="nav-ul">
              <li class="nav-item">
                <a href="#">保险超市</a>
              </li>
              <li class="nav-item">
                <a href="#">服务大厅</a>
              </li>
              <li class="nav-item">
                <a href="#">会员中心</a>
              </li>
              <li class="nav-item">
                <a href="#">投资者关系</a>
              </li>
              <li class="nav-item">
                <a href="#">关于公司</a>
              </li>
            </ul>
          </div>
          <div class="searchBox">
            <input type="text" placeholder="搜索您感兴趣的保险类型或服务" />
            <span class="search_btn"></span>
            <span class="toApp"></span>
            <span class="toMy" @click="toMyInfo"></span>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <div class="footer">
          <div class="company">版权所有©中国太平洋保险（集团）股份有限公司</div>
          <div class="beian">
            CopyRight©China Pacific Insurance(group) Co.,Ltd.. All Rights
            Reserved
            <a href="http://beian.miit.gov.cn" class="beian"
              >沪ICP备12028297号</a
            >"
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// import homePage from "../content/HomePage";
export default {
  // components: {
  //   homePage,
  // },
  methods: {
    toMyInfo() {
      this.$router.push("/face/myInfo");
    },
  },
};
</script>


<style lang="scss" scoped>
.all {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
* {
  box-sizing: border-box;
}
.el-header {
  background-color: rgb(21, 101, 192);
  // position: fixed;
  // top: 0;
  // left: 0;
  width: 100%;
  height: 84px !important;
  .header_container {
    width: 1150px;
    margin: 0 auto;
    height: 84px;
    display: flex;
    align-items: center;
    .Logo {
      span {
        display: block;
        width: 180px;
        height: 50px;
        overflow: hidden;
      }
    }
    .nav {
      margin-left: 50px;
      .nav-ul {
        list-style: none;
        display: flex;
        align-items: center;
        .nav-item {
          width: 100px;
          height: 84px;
          display: flex;
          align-items: center;
          justify-content: center;
          a {
            text-decoration: none;
            color: white;
            font-weight: 800;
          }
          &:hover {
            background-color: rgb(13, 69, 156);
          }
        }
      }
    }
    .searchBox {
      margin-left: 5px;
      display: flex;
      align-items: center;
      input {
        line-height: 40px;
        height: 40px;
        width: 260px;
        border-radius: 25px;
        border: 1px solid #1565c0;
        outline: 0;
        padding: 0 26px;
      }
      .search_btn {
        height: 26px;
        width: 26px;
        display: block;
        margin-left: 14px;
        background: url("../../assets/images/cpic_common_icons.png");
        background-position: -344px -194px;
      }
      .toApp {
        height: 29px;
        width: 19px;
        display: block;
        margin-left: 20px;
        background: url("../../assets/images/appErWei.png") center center/100%
          100% no-repeat;
      }
      .toMy {
        height: 24px;
        width: 23px;
        display: block;
        margin-left: 20px;
        background: url("../../assets/images/my.png") center center/100% 100%
          no-repeat;
      }
    }
  }
}
.el-footer {
  padding: 0;
  height: 80px !important;
  .footer {
    height: 80px;
    background-color: #4e5359;
    color: #81848b;
    font-size: 13px;
    padding-top: 14px;
    .company {
      text-align: center;
      margin-top: 7px;
    }
    .beian {
      text-align: center;
      margin-top: 7px;
      a {
        color: #7e8c8d;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
.el-main {
  flex: 1;
  padding: 0;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>